<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
<style type="text/css">
<!--
.style1 {
	color: #FF0000;
	font-weight: bold;
}
-->
</style>
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">XML Attributes for Padding</h2></td>
  </tr>
  <tr>
    <td class="text">FusionCharts lets you define various paddings and margins. We will see them one-by-one. </td>
  </tr>
  <tr>
    <td class="text">&nbsp;</td>
  </tr>
  <tr>
    <td class="textBold">Chart Margins</td>
  </tr>
  <tr>
    <td class="text">By default, FusionCharts provides some padding between the chart border and the   canvas. This is called the chart margin and each of the margins - left, right, top, bottom   chart can be set individually. </td>
  </tr>
  <tr>
    <td><img height="239" alt="image of chart margins" 
            src="Images/padding7.jpg" 
            width="461" /></td>
  </tr>
  <tr>
    <td><p class="textBold"><strong>Chart Left Margin</strong></p></td>
  </tr>
  <tr>
    <td><span class="text">Amount of empty space that you want to put on the 
      left side of your chart is called chart left margin. Nothing is rendered in this space</span>. <span class="text">The XML used to configure the same is:</span></td>
  </tr>
  
  
  <tr>
    <td class="codeBlock"><span class="text"><span class="codeInline">&lt;chart <strong>chartLeftMargin=&quot;15&quot;&gt;</strong></span></span></td>
  </tr>
  <tr>
    <td class="text">&nbsp;</td>
  </tr>
  <tr>
    <td><p class="textBold">Chart Right Margin</p></td>
  </tr>
  <tr>
    <td><p class="text">Amount of empty space that you want to put on the 
      right side of your chart.</p></td>
  </tr>
  <tr>
    <td class="codeBlock"><span class="text"><span class="codeInline">&lt;chart <strong>chartRightMargin=&quot;15&quot;</strong>&gt;</span></span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p class="textBold">Chart Top Margin</p></td>
  </tr>
  <tr>
    <td><p class="text">Amount of empty space that you want to put on the 
      top of your chart.<br />
    </p></td>
  </tr>
  <tr>
    <td class="codeBlock">&lt;chart <strong>chartTopMargin=&quot;10&quot;</strong>&gt; </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p class="text"><strong>Chart Bottom Margin</strong></p></td>
  </tr>
  <tr>
    <td><p class="text">Amount of empty space that you want to put on the bottom of 
      your chart.</p></td>
  </tr>
  <tr>
    <td class="codeBlock">&lt; chart <strong>chartBottomMargin=&quot;10&quot;&gt;</strong></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><strong class="textBold">Caption Padding </strong></td>
  </tr>
  <tr>
    <td><p class="text">This attribute lets you define the space between the caption of the chart and the top of the chart canvas. But when you have a sub-caption defined in the chart, it controls the space between the sub-caption and the top of the chart canvas. </p></td>
  </tr>
  
  <tr>
    <td><img 
            src="Images/padding1.jpg" alt="image of caption padding" 
            width="355" height="103" /></td>
  </tr>
  
  <tr>
    <td class="text">XML:</td>
  </tr>
  
  <tr>
    <td class="codeBlock">&lt;chart <strong>captionPadding=&quot;15&quot;</strong>&gt; </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p class="textBold"><strong>x-Axis Name Padding</strong></p></td>
  </tr>
  <tr>
    <td><p class="text">Using this, you can set the distance between the top of 
      x-axis title and the bottom of data labels (or canvas, if data labels 
      are not shown). </p></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  
  <tr>
    <td class="text"><img 
            src="Images/padding2.jpg" 
            alt="images for XAxisName padding" 
            width="355" height="126" /></td>
  </tr>
  <tr>
    <td class="text">XML: </td>
  </tr>
  
  <tr>
    <td class="codeBlock">&lt;chart <strong>xAxisNamePadding=&quot;10&quot;</strong>&gt;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p class="text"><strong>y-Axis Name Padding</strong></p></td>
  </tr>
  <tr>
    <td><span class="text">The padding that you want to set between the y-axis name and values. </span></td>
  </tr>
  
  <tr>
    <td class="text"><img 
            src="Images/padding3.jpg" 
            alt="image of yAxisnamepadding" 
            width="233" height="230" /></td>
  </tr>
  <tr>
    <td class="text">XML: </td>
  </tr>
  <tr>
    <td height="10"></td>
  </tr>
  <tr>
    <td class="codeBlock">&lt;chart <strong>yAxisNamePadding=&quot;10&quot;</strong>&gt;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><span class="textBold">y-Axis Values Padding</span></td>
  </tr>
  <tr>
    <td class="text">This allows you to set the padding between the left end of the chart canvas and the y-axis values. </td>
  </tr>
  <tr>
    <td class="text"><img 
            src="Images/padding4.jpg" 
            alt="2D Chart withy Axis value padding" 
            width="175" height="261" /></td>
  </tr>
  <tr>
    <td class="text">XML: </td>
  </tr>
  <tr>
    <td height="10"></td>
  </tr>
  <tr>
    <td class="codeBlock">&lt;chart <strong>yAxisValuesPadding=&quot;5&quot;</strong>&gt; </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><span class="textBold">Label Padding</span></td>
  </tr>
  <tr>
    <td><span class="text">This attribute sets the vertical space between the 
      canvas bottom edge and the data labels.</span></td>
  </tr>
  <tr>
    <td class="text"><img 
            src="Images/padding5.jpg" 
            alt="2D column with Label Padding" 
            width="362" height="142" class="imageBorder" /></td>
  </tr>
  <tr>
    <td class="text">XML: </td>
  </tr>
  
  <tr>
    <td class="codeBlock">&lt;chart <strong>labelPadding=&quot;3&quot;</strong>&gt; </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="textBold">Value Padding</td>
  </tr>
  <tr>
    <td><span class="text">It controls the space 
      between your columns/anchors and the value 
      textboxes.</span></td>
  </tr>
  <tr>
    <td class="text"><img height="238" 
            alt="2DChart with valuepadding" 
            src="Images/padding6.jpg" 
            width="234" /></td>
  </tr>
  <tr>
    <td class="text">XML Example: </td>
  </tr>
  
  <tr>
    <td class="codeBlock">&lt;chart <span 
      class="style5 codeInline"><strong>valuePadding=&quot;3&quot; </strong></span>&gt;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="textBold">Canvas Padding</td>
  </tr>
  <tr>
    <td class="text">For a line/area chart, the padding between the canvas border and the   position where the line/area chart begins to draw is called  canvas padding. </td>
  </tr>
  <tr>
    <td class="text"><img height="229" 
            alt="2DChart with valuepadding" 
            src="Images/padding8.jpg" 
            width="159" /></td>
  </tr>
  <tr>
    <td class="text">XML Example: </td>
  </tr>
  <tr>
    <td class="codeBlock">&lt;chart <span 
      class="style5 codeInline"><strong>canvasPadding=&quot;30&quot; </strong></span>&gt;</td>
  </tr>
</table>
</body>
</html>
